<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 精选题库 -->
        <el-row>
          <el-col :span="24"
            ><div class="grid-content bg-purple-dark">
              <span style="font-size:12px; color:pink;"
                >说明：目前支持学科和关键字条件筛选</span
              >
            </div></el-col
          >
        </el-row>
        <!-- 新增 -->
        <!-- 第一行 -->
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <el-button
                class="add-button"
                size="small"
                type="success"
                @click="$router.push('/questions/new')"
              >
                <i class="el-icon-edit"></i>
                新增试题
              </el-button>
            </div>
          </el-col>
        </el-row>

        <!-- 表单 -->
        <el-form ref="form" :model="form" label-width="80px" size="small">
          <!-- 第二行 -->
          <el-row>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="学科" prop="subjectID">
                  <el-select
                    v-model="form.subjectID"
                    placeholder="请选择"
                    @change="subjectChange"
                  >
                    <el-option
                      v-for="(item, index) in subjectList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="二级目录" prop="catalogID">
                  <el-select v-model="form.catalogID" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in secondLevelDirectory"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="标签" prop="tags">
                  <el-select v-model="form.tags" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in labelList"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="关键字" prop="keyword">
                  <el-input
                    v-model="form.keyword"
                    placeholder="根据题干搜索"
                  ></el-input>
                </el-form-item></div
            ></el-col>
          </el-row>

          <!-- 第三行 -->
          <el-row>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="试题类型" prop="questionType">
                  <el-select v-model="form.questionType" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in questionType"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="难度" prop="difficulty">
                  <el-select v-model="form.difficulty" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in difficulty"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="方向" prop="direction">
                  <el-select v-model="form.direction" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in direction"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="录入人" prop="creatorID">
                  <el-select v-model="form.creatorID" placeholder="请选择">
                    <el-option
                      v-for="item in userList"
                      :key="item.id"
                      :label="item.username"
                      :value="item.username"
                    ></el-option>
                  </el-select>
                </el-form-item></div
            ></el-col>
          </el-row>

          <!-- 第四行 -->
          <el-row>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="题目备注" prop="remarks">
                  <el-input v-model="form.remarks"></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item label="企业简称" prop="shortName">
                  <el-input v-model="form.shortName"></el-input>
                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-form-item label="城市" prop="province">
                  <el-select
                    class="small-select-left"
                    v-model="form.province"
                    placeholder="请选择"
                    @change="selectProvinces"
                  >
                    <el-option
                      v-for="(item, index) in provinces"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                  <el-form-item class="small-select-right" prop="city">
                       <el-select
                    v-model="form.city"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in citys"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                  </el-form-item>

                </el-form-item></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple-light">
                <el-form-item>
                  <el-button class="add-button" type="primary" @click="onSubmit"
                    >搜索</el-button
                  >
                  <el-button class="add-button" @click="resetForm"
                    >清除</el-button
                  >
                </el-form-item>
              </div></el-col
            >
          </el-row>
        </el-form>

        <!-- 标签页 -->
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="全部" name="all"></el-tab-pane>
          <el-tab-pane label="待审核" name="0"></el-tab-pane>
          <el-tab-pane label="已审核" name="1"></el-tab-pane>
          <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
        </el-tabs>

        <!-- 条数栏 -->
        <el-alert
          show-icon
          :title="`数据一共 ${counts} 条`"
          type="info"
          :closable="false"
        >
        </el-alert>

        <!-- 表格 -->
        <el-table :data="list" style="width: 100%">
          <el-table-column prop="number" label="试题编号" width="150">
          </el-table-column>
          <el-table-column prop="subject" label="学科" width="120">
          </el-table-column>
          <el-table-column prop="catalog" label="目录" width="120">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="120">
          </el-table-column>
          <el-table-column prop="question" label="题干" width="300">
            <template slot-scope="scope">
              <span v-html="scope.row.question"></span>
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间" width="200">
            <template slot-scope="scope">
              {{ scope.row.addDate | filterTime }}
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="120">
          </el-table-column>
          <el-table-column prop="creator" label="录入人" width="120">
          </el-table-column>
          <el-table-column prop="chkState" label="审核状态" width="120">
          </el-table-column>
          <el-table-column prop="chkRemarks" label="审核意见" width="120">
          </el-table-column>
          <el-table-column prop="chkUser" label="审核人" width="120">
          </el-table-column>
          <el-table-column prop="publishType" label="发布状态" width="120">
          </el-table-column>
          <el-table-column
            align="center"
            fixed="right"
            label="操作"
            width="200"
          >
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="preview(scope.row.id)"
                type="text"
                size="small"
              >
                预览
              </el-button>
              <el-button
                @click.native.prevent="check(scope.row.id)"
                type="text"
                size="small"
                :disabled="scope.row.chkState === chkType[1].label"
              >
                审核
              </el-button>
              <el-button
                @click.native.prevent="$router.push('/questions/new?id='+scope.row.id)"
                type="text"
                size="small"
                :disabled="scope.row.publishState === 1"
              >
                修改
              </el-button>
              <el-button
                @click.native.prevent="OnOrOffTheShelf(scope.row.id,scope.row.publishState)"
                type="text"
                size="small"
              >
                {{scope.row.publishState === 1 ? '下架' : '上架'}}
              </el-button>
              <el-button
                @click.native.prevent="deleteFn(scope.row.id)"
                type="text"
                size="small"
                :disabled="scope.row.publishState === 1"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-row>
          <el-col :span="24"
            ><div class="grid-content bg-purple-dark">
              <el-pagination
                class="right"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="query.page"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="query.pagesize"
                layout=" prev, pager, next, sizes, jumper"
                :total="counts"
              >
              </el-pagination></div
          ></el-col>
        </el-row>
        <!-- 试题弹框 -->
        <test-questions-dialog :showDialog="isShowTestQuestionsDialog" @close="isShowTestQuestionsDialog = false" :question="question"></test-questions-dialog>
        <!-- 审核弹框 -->
        <check-dialog :isShowCheckDialog="isShowCheckDialog" :id="id" @close="isShowCheckDialog = false" @submit="choice()"></check-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { choice, detail, choicePublish, remove } from '@/api/hmmm/questions'
import {
  questionType,
  difficulty,
  chkType,
  direction
} from '@/api/hmmm/constants'
import { simple } from '@/api/hmmm/subjects'
import dayjs from 'dayjs'
import { simpleList } from '@/api/hmmm/directorys'
import { labelSimple } from '@/api/hmmm/tags'
import { userList } from '@/api/base/users'
import { provinces, citys } from '@/api/hmmm/citys'
import TestQuestionsDialog from './components/dialog.vue'
import CheckDialog from './components/checkDialog.vue'
export default {
  name: 'QuestionsChoice',
  components: {
    TestQuestionsDialog,
    CheckDialog
  },
  data () {
    return {
      chkType,
      questionType,
      difficulty,
      direction,
      question: {}, // 弹出框所需要的数据
      isShowCheckDialog: false, // 是否显示审核弹框
      id: '', // 当前行的数据id
      isShowTestQuestionsDialog: false, // 是否显示试题弹框
      query: {
        page: 1, // 当前页数
        pagesize: 5 // 一页显示多少条数据
      },
      provinces: provinces(), // 所有城市
      citys: [], // 城市下地区
      form: {
        subjectID: null, // 学科
        catalogID: null, // 目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: null, // 录入人
        remarks: '', // 题目备注
        shortName: '', // 企业简称
        province: '', // 省份
        city: '' // 城市
      },
      counts: 0, // 列表总数
      subjectList: [], // 学科下拉表单所需数据
      list: [], // 列表数据
      activeName: 'all', // tabs标签页默认选择
      currentPage: 1, // 分页当前页数
      secondLevelDirectory: [], // 二级目录列表
      labelList: [], // 标签列表
      userList: [] // 用户列表
    }
  },
  created () {
    //  调用获取数据列表的方法
    this.choice()
    // 调用获取学科列表
    this.getList()
    // 调用获取用户列表的方法
    this.getUserList()
  },
  methods: {
    //   点击删除触发的事件方法
    deleteFn (id) {
      this.$confirm('您确定删除这道题目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await remove({ id })
        if (!res.data.success) return this.$message('操作失败')
        this.$message.success('操作成功')
        // if ()
        if (this.list.length === 1) {
          this.query.page--
          if (this.query.page <= 1) {
            this.query.page = 1
          }
        }
        this.choice()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '您已取消了操作'
        })
      })
    },
    //   点击上下架触发的事件方法
    OnOrOffTheShelf (id, publishState) {
      this.$confirm(`您确定${publishState === 1 ? '下架' : '上架'}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        publishState === 1 ? publishState = 0 : publishState = 1
        const res = await choicePublish({ id, publishState })
        if (!res.data.success) return this.$message('操作失败')
        this.$message.success('操作成功')
        this.choice()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '您已取消了操作'
        })
      })
    },

    //   点击审核触发的事件方法
    check (id) {
      this.isShowCheckDialog = true
      this.id = id
    },

    //   点击预览触发的事件方法
    async preview (id) {
      this.isShowTestQuestionsDialog = true
      const res = await detail({ id })
      this.question = res.data
    },
    // 点击清除所触发的方法
    resetForm () {
      this.$refs.form.resetFields()
      this.secondLevelDirectory = []
      this.labelList = []
      this.citys = []
    },

    //   选择城市触发的方法
    selectProvinces (city) {
      this.citys = citys(city)
    },

    //   获取用户列表
    async getUserList () {
      const res = await userList()
      this.userList = res.data.list
    },

    //   学科下拉菜单改变时触发
    async subjectChange (id) {
      //   const res = await list(this.form.subjectID)
      // 调用获取学科列表
      const res = await simpleList({ subjectID: id })
      this.secondLevelDirectory = res.data
      const labelRes = await labelSimple({ subjectID: id })
      this.labelList = labelRes.data
    },
    //   获取学科列表
    async getList () {
      const res = await simple()
      this.subjectList = res.data
    },

    //   获取列表数据
    async choice (data) {
      const res = await choice({ ...this.query, ...data, ...this.form })
      //   调用格式化数据的方法
      this.formatData(res.data.items)
      this.list = res.data.items
      this.counts = res.data.counts
    },
    // 格式化数据
    formatData (data) {
      data.forEach(item => {
        //   格式化题型
        if (item.questionType) { questionType.forEach(q => { if (Number(item.questionType) === q.value) { item.questionType = q.label } }) }
        // 格式化难度
        if (item.difficulty) { difficulty.forEach(q => { if (Number(item.difficulty) === q.value) { item.difficulty = q.label } }) }
        // 格式化审核状态
        if (item.chkState !== '') { chkType.forEach(q => { if (Number(item.chkState) === q.value) { item.chkState = q.label } }) }
        // 格式化发布状态
        if (item.chkState === '待审核' || item.chkState === '已拒绝') { item.publishType = '待发布' }
        if (item.chkState === '通过' && item.publishState === 1) { item.publishType = '已发布' }
        if (item.chkState === '通过' && item.publishState === 0) { item.publishType = '已下架' }
      })
      return data
    },
    // 每页显示条目个数改变时触发的方法
    handleSizeChange (pagesize) {
      this.query.pagesize = pagesize
      this.query.page = 1
      this.choice()
    },

    // 当前页改变的时候触发的方法
    handleCurrentChange (page) {
      this.query.page = page
      this.choice()
    },

    // 点击搜索触发的方法
    onSubmit () {
      this.query.page = 1
      this.choice(this.form)
    },

    // tabs标签页改变时触发的方法
    handleClick (tab) {
      if (tab.name === 'all') {
        this.choice()
      } else {
        this.query.page = 1
        this.choice({ chkState: tab.name })
      }
    }
  },
  filters: {
    filterTime (time) {
      return dayjs(time).format('YYYY-MM-DD  HH:mm:ss')
    }
  }
}
</script>

<style scoped>
.add-button {
  float: right;
  margin: 0 0 15px 15px;
}
.el-select {
  width: 100%;
}
.small-select-left {
  width: 50%;
  padding-right: 7.5px;
}
.small-select-right {
  float: right;
  width: 50%;
  padding-left: 7.5px;
}
.tab {
  background-color: #f4f4f5;
}
.el-alert.el-alert--info.is-light {
  margin-bottom: 15px;
}
.right {
  float: right;
  margin-top: 15px;
}
</style>
